<template>
  <div class="article-page">
    <van-search
  v-model="value"
  show-action
  label="北京▼"
  placeholder="请输入小区或地址"
  @search="onSearch"
>
  <template #action>

    <div @click="onSearch"><van-icon name="location-o" /></div>
  </template>
</van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(item,index) in swipe" :key="index"><img class="lbt" :src="`http://www.xiaoshuaipeng.com:8080${item.imgSrc}`" alt=""></van-swipe-item>

</van-swipe>
<van-grid>
  <van-grid-item icon="wap-home-o" text="整租" />
  <van-grid-item icon="friends-o" text="合租" />
  <van-grid-item icon="location-o" text="地图找房" />
  <van-grid-item icon="shop-o" text="去出租" />
</van-grid>
<div class="subfield">
  <van-cell title="租房小组" value="更多" />
<ul>
  <li v-for="(item,index) in zfxz" :key="index">
    <div class="left">
         <h3>{{ item.title }}</h3>
         <p>{{ item.desc }}</p>
    </div>
  <div class="rigth"><img :src="`http://www.xiaoshuaipeng.com:8080${item.imgSrc}`" alt=""></div></li>

</ul>
</div>
<h3>最新资讯</h3>
<van-card v-for="(item,index) in splb" :key="index"
  :num="item.date"
  :price="item.from"
  :title="item.title"
  :thumb="`http://www.xiaoshuaipeng.com:8080${item.imgSrc}`"
/>

  </div>
</template>

<script>
import instance from '@/utils/request'
export default {
  name: 'ArticlePage',
  data () {
    return {
      value: '',
      swipe: '',
      zfxz: '',
      splb: ''
    }
  },
  async created () {
    const res = await instance.get('/home/swiper')
    console.log(res.data.body)
    this.swipe = res.data.body

    const res1 = await instance.get('/home/groups')
    console.log(res1.data.body)
    this.zfxz = res1.data.body

    const res2 = await instance.get('/home/news')
    console.log(res2.data.body)
    this.splb = res2.data.body
  },
  methods: {
    onSearch () {
      console.log('点击搜索')
    }
  }
}
</script>

<style lang="less" scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: 200px;
  }
  .lbt{width: 100%;
  height: 100%;}
  h3{
    margin-left: 15px;
    font-size: 16px;
  }
  ul{background-color: #f1f2f3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li{background-color: #fff;
      width: 167px;
      height: 75px;
      display: flex;
      margin: 10px;
      margin-top: 0;

      img{width: 55px;
      height: 55px;
      border-radius: 50%;}
     }
     .left{margin-right: 20px;}
     .rigth{margin-top: 10px;}
    h3{font-size: 13px;}
    p{font-size: 13px;
    margin-left: 15px;}
  }

    .van-search{position:absolute ;
z-index: 999;
width: 100%;
margin-top: 10px;
background-color: rgba(0, 0, 0, 0);
    }
    .van-icon-location-o{font-size: 30px;
      margin-top: 10px;
      color: #fff;}
      .subfield{background-color: #f6f5f6;}
      .van-cell{background-color: rgba(0, 0, 0, 0);}
</style>
